<template>
<div class="bg" :style="{'background-image':`url(${require('@/images/login.jpg')})`}"> 
  <div class="box">
    <nav>
      <router-link to="/login">登录</router-link>
      <h2>·</h2>
      <router-link to="/register">注册</router-link>
    </nav>
    <div>
      <el-form ref="logForm" :model="formData" label-width="0" status-icon :rules="myrules">
        <el-form-item label prop="logUserName">
          <el-input 
            v-model="formData.logUserName"
            placeholder="请输入用户名"
            prefix-icon="el-icon-user-solid"
          ></el-input>
        </el-form-item>

        <el-form-item label prop="logPassword">
          <el-input
            v-model="formData.logPassword"
            placeholder="请输入密码"
            type="password"
            prefix-icon="el-icon-lock"
          ></el-input>
        </el-form-item>

        <el-form-item>
          <el-button type="success" class="btn" round @click="fnlog('logForm')">立即登录</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</div>
</template>

<script>
export default {
  data() {
    return {
        
      formData: {

        logUserName: "",
        logPassword: "",
        
      },
      myrules: {
        logUserName: [
          { required: true, message: "用户名不能为空", trigger: "blur" },
          { min: 3, max: 15, message: "必须3-15位", trigger: "blur" },
        ],
        logPassword: [
          { required: true, message: "密码不能为空", trigger: "blur" },
          { min: 3, max: 12, message: "必须3-12位", trigger: "blur" },
        ],
      },
    };
  },

  methods: {
    fnlog(formName)  {
if (this.checkUserLogin()) {  
          // 登录成功
        // 1,存储 token
        localStorage.setItem('token', 'Bearer xxxx')
        // 2,跳转到后台主页
        this.$router.push('/index')
    
      } else if(this.formData.logUserName==="admin" && this.formData.logPassword==="123"){
        this.$$router.push('/index')

      }     
      else{
        // 登录失败
        localStorage.removeItem('token')        
      }
   },

    /**
     * 校验用户是否可以登录
     */
    checkUserLogin() {
      const userList = JSON.parse(window.localStorage.getItem('userList'))
      const flag = userList.some(item => {
        return item.name === this.formData.logUserName && item.password === this.formData.logPassword
      })

      !flag && this.$message.error('用户或密码输入错误')

      return flag
    }
  }
}
</script>

<style scoped>
.bg>>> .el-input__icon{
    padding-bottom: 15px;
    height: 100%;
    width: 25px;
    text-align: center;
    transition: all .3s;
    line-height: 40px;
    padding-bottom: 15px;
}
.bg{
	
	background-size: 100% 100%;
	width: 100%;
	height: 100%;
	position: fixed;
    background-repeat: no-repeat;
}
.box {
  width: 380px;
  background: white;
  box-shadow: 0 0 5px 3px #ddd;
  border: 1px solid #ccc;
  margin: 100px auto 0;
  padding: 40px;
  text-align: center;
}
h2 {
  display: inline;
  margin: 0 6px;
}
nav a {
  text-decoration: none;
  font-size: 20px;
  color: black;
}
nav a.router-link-active {
  color: red;
  text-decoration: underline;
}

.box nav {
  margin-bottom: 30px;
}
.btn {
  width: 100%;
}
</style>